<template>
  <ul>
    <li v-for="item in info">
      <div
        class="navTitle" @click="onItem(item)"
        :class="{
          on:item.path===fullPath
        }"
      >
        <i class="iconfont" :class="item[iconName]" v-if="isIcon"></i>
        <i class="back" v-for="i in backNum"></i>
        <p>{{item[titleName]}}</p>
        <i
          class="icon"
          :class="item.childrenShow?'el-icon-arrow-down':'el-icon-arrow-up'"
          v-if="item[childrenName] && item[childrenName].length>0"
        />
      </div>
      <template v-if="item[childrenName] && item[childrenName].length>0 && item.childrenShow">
        <menu-nav-item
          :info="info"
          :iconName="iconName"
          :titleName="titleName"
          :childrenName="childrenName"
          :isIcon="isIcon"
          :backNum="backNum+1"
        />
      </template>
    </li>
  </ul>
</template>
<script>
export default {
  name: "MenuNavItem",
  props: {
    info:{
      type:Array,
    },
    iconName:{
      type:String,
      default: () => {
        return 'icon';
      },
    },
    titleName:{
      type:String,
      default: () => {
        return 'title';
      },
    },
    childrenName:{
      type:String,
      default: () => {
        return 'children';
      },
    },
    pathName:{
      type:String,
      default: () => {
        return 'path';
      },
    },
    isIcon:{
      type:Boolean,
      default: () => {
        return false;
      },
    },
    backNum:{
      type:Number,
      default: () => {
        return 0;
      },
    },
  }, // 获取父组件数据
  components: {

  },

  mounted() {
    this.fullPath=this.$router.history.current.fullPath
  },
  watch:{
    $route: {
      handler: function(val, oldVal){
        this.fullPath=val.fullPath
      },
      // 深度观察监听
      deep: true
    }
  },
  data() {
    return {
      fullPath:''
    };
  },
  methods: {
    onItem(val){
      if (val[this.childrenName] && val[this.childrenName].length>0){
        this.$set(val,'childrenShow',!val.childrenShow)
      }
      if (val[this.pathName]){
        this.path(val[this.pathName])
      }
    },
    path(url){
      this.$router.push({
        path:url,
      })
    },
  },
  computed: {

  }
};
</script>
<style  lang="scss" scoped>
.navTitle{
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  cursor: pointer;
  .back{
    width: 18px;
  }
  .icon{
    filter: alpha(opacity=0.6);opacity: 0.6;
  }
  p{
    flex: 1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  &:hover{
    background:#ecf5ff;
    color: #3f61f1;
  }
  &.on{
    background:linear-gradient(45deg, #5d7cfd 0, #3f61f1 100%);
    color: #fff;
  }
  &.stress{
    &:hover{
      background: #e13335;
      color:#fff;
    }
  }
}
</style>
